<script setup>
import { Picture, PieChart, Search, Refresh, Upload, DeleteFilled, Delete, Hide, View, Download } from '@element-plus/icons-vue';
import { useFileStore } from '@/stores'
import { storeToRefs } from 'pinia';
import { onMounted } from 'vue';
const fileStore = useFileStore()
const { fileSearch, pageInfo, files } = storeToRefs(fileStore)
const { getFiles, refresh, handleSelectionChange, deleteFiles, changeFileStatus, handleUploadSuccess, download } = fileStore
onMounted(() => {
    getFiles()
})
</script>
<template>
    <div style="display: flex; flex-direction: column; margin: 10px 0 0 20px;">
        <div style="margin: 0 0 10px 0;display: inline;">
            <el-input v-model="fileSearch.name" style="width: 200px; margin: 0 15px 0 0 ;" placeholder="文件名称"
                :suffix-icon="Search"></el-input>
            <el-input v-model="fileSearch.size" style="width: 200px; margin: 0 15px 0 0 ;" placeholder="文件大小"
                :suffix-icon="PieChart"></el-input>
            <el-input v-model="fileSearch.type" style="width: 200px; margin: 0 15px 0 0 ;" placeholder="文件类型"
                :suffix-icon="Picture"></el-input>
            <el-button style="margin: 0 15px 0 0 ;" type="primary" @click="getFiles()">搜索<el-icon>
                    <Search />
                </el-icon></el-button>
            <el-button style="margin: 0 15px 0 0 ;" type="primary" @click="refresh()">重置<el-icon>
                    <Refresh />
                </el-icon></el-button>
            <br>
            <el-upload action="/api/file/upload" :show-file-list="false" :on-success="handleUploadSuccess"
                style="display: inline-block; margin: 15px 15px 0 0 ;">
                <el-button type="success" style="padding-top: 5px;">文件上传
                    <el-icon>
                        <Upload />
                    </el-icon>
                </el-button>
            </el-upload>
            <el-button style="margin: 0 15px 0 0 ;" type="warning" @click="deleteFiles()">批量删除<el-icon>
                    <DeleteFilled />
                </el-icon></el-button>
        </div>
    </div>
    <div style=" margin: 10px 0 0 20px;padding-right: 20px;">
        <el-table :data="files" :border="true" stripe style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="40" />
            <el-table-column property="name" label="name"  />
            <el-table-column property="size" label="size"  />
            <el-table-column property="type" label="type"  />
            <el-table-column property="enable" label="enable" >
                <template #default="scope">
                    <el-switch v-model="scope.row.enable" :active-action-icon="View" :inactive-action-icon="Hide"
                        @change="changeFileStatus(scope.row.id)" />
                </template>
            </el-table-column>
            <el-table-column property="options" label="options" width="300">
                <template #default="scope">
                    <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" :hide-after=100 hide-icon
                        title="确定要删除吗?" @confirm="changeFileStatus(scope.row.id, true)">
                        <template #reference>
                            <el-button type="danger">删除<el-icon>
                                    <Delete />
                                </el-icon></el-button>
                        </template>
                    </el-popconfirm>
                    <el-button type="success" @click="download(scope.row.id)">下载<el-icon>
                            <Download />
                        </el-icon>
                    </el-button>
                </template>
            </el-table-column>

        </el-table>
    </div>
    <div style=" margin: 10px 0 0 20px;padding-right: 20px;">
        <el-pagination v-model:current-page="pageInfo.current" v-model:page-size="pageInfo.pageSize" :total="pageInfo.total"
            :page-sizes="[5, 10, 15, 20]" layout="total, sizes, prev, pager, next, jumper" @size-change="getFiles()"
            @current-change="getFiles()" />
    </div>
</template>
<style scoped></style>